<template>
  <section class="container clearfix" v-if="result">
    <div class="content-wrap clearfix">
      <div class="content">
        <div class="content-main">
           <div class="article-header">
            <h1 class="article-title">{{result.data.item.title}}</h1>
          </div>
          <div class="article-introduction">简介：{{result.data.item.introduction}}</div>
          <article class="article-content" v-html="marked(result.data.item.content)"></article>
        </div>
        <div class="respond">
          <div class="comt-title">
            <div class="comt-author">发表我的评论</div>
          </div>
          <div class="comt">
            <div class="comt-box">
              <div class="comt-ctrl">
                <div class="comment-sumbit" @click="submit_comment">发表评论</div>
              </div>
            </div>
          </div>
        </div>
        <div class="post-comment-box">
          <h3>最新评论</h3>
          <div class="commentlist">
            <commentlist :childIndex="0" :list="result.data.comment" @setpid="setPid" v-if="result.data.comment.length"></commentlist> 
          </div>
        </div>
      </div>
    </div>
    <my-right :tags="result.data.tags"></my-right>
    <my-comment v-if="showComment" @hideCommentBox="hideCommentBox">
      <div class="comment-model-title">请填写评论</div>
      <div class="comment-model-input-box">
        <div class="clearfix" v-if="!showCommentInput">
          <input type="text" v-model="username" placeholder="请输入你的昵称" />
          <input type="text" v-model="email"  placeholder="请输入你的邮箱"/>
          <div class="comment-model-user-btn" @click="saveLocalUser">提交昵称和邮箱</div>
        </div>
        <div class="cleatfix" v-if="showCommentInput">
          <textarea v-model="content"></textarea>
          <div class="comment-model-user-btn" @click="addComment">提交评论</div>
        </div>
      </div> 
    </my-comment>
  </section>
</template>

<script>
import axios from "~/plugins/axios";
import MyRight from "~/components/Right.vue";
import MyComment from "~/components/comment.vue";
import commentlist from "~/components/commentlist";
let uk = "upupjs-ukey";
let ek = "upupjs-ekey";
export default {
  components: {
    MyRight,
    MyComment,
    commentlist
  },
  name: "id",
  data() {
    return {
      articles_id: this.$route.params.id,
      content: "",
      p_id: 0,
      push_comment_index: -1,
      showCommentInput: false,
      username: "",
      email: "",
      showComment: false
    };
  },
  asyncData({ params, error, isClient }) {
    const fetchUrl = `/api/article/${params.id}`;
    return axios
      .get(fetchUrl)
      .then(resp => {
        let { data } = resp;
        let obj = {
          result: data
        };
        return obj;
      })
      .catch(err => {
        error({ statusCode: 500, message: `${e}` });
      });
  },
  mounted() {
    (this.username = localStorage.getItem(uk)),
      (this.email = localStorage.getItem(ek)),
      (this.showCommentInput = this.username && this.email);
  },
  head() {
    return {
      title: this.result.data.item.title,
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.result.data.item.keyword
        }
      ]
    };
  },
  methods: {
    setPid(obj) {
      console.log(obj);
      this.showComment = !this.showComment;
      this.p_id = obj.id;
      this.push_comment_index = obj.orginDataIndex;
      console.log(obj);
    },
    hideCommentBox() {
      this.showComment = !this.showComment;
    },
    saveLocalUser() {
      if (this.username && this.email) {
        localStorage.setItem(uk, this.username);
        localStorage.setItem(ek, this.email);
        this.showCommentInput = true;
      } else {
        alert("请填写昵称和邮箱再评论");
      }
    },
    submit_comment() {
      this.showComment = !this.showComment;
      this.p_id = 0;
      this.push_comment_index = -1;
    },
    addComment() {
      let { articles_id, p_id, content, username, email } = this;
      axios
        .post("/api/article/addComment", {
          p_id,
          articles_id,
          content,
          username,
          email
        })
        .then(resp => {
          let result = resp.data;
          
          if (result.status == 1) {
            this.showComment = !this.showComment;
            if (this.push_comment_index == -1) {
              this.result.data.comment.splice(0,0,{
                content,
                username,
                email,
                created_at: new Date(),
                id: result.data.insertId,
                commentList:[]
              });
            }else{
  
              let res = null;
              
              for(var i=0;i<this.push_comment_index.length;i++){
                if(res){
                  if(!res[this.push_comment_index[i]]['commentList']){
                    this.$set(res[this.push_comment_index[i]],'commentList',[])
                  }
                  res = res[this.push_comment_index[i]]['commentList'];
                }else{
                  if(!this.result.data.comment[this.push_comment_index[i]]['commentList']){
                    this.$set(this.result.data.comment[this.push_comment_index[i]],'commentList',[])
                  }
                  res = this.result.data.comment[this.push_comment_index[i]]['commentList'];
                }  
              }
              res.splice(0,0,{
                content,
                username,
                email,
                created_at: new Date(),
                id: result.data.insertId
              })
              // this.result.data.comment[ax]['commentList'].splice()
            }
            
          }
        });
    }
  }
};
</script>

